import React, { useRef } from 'react'
import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table'
import { HttpQueryFlowVersion, HttpSetVersionContext } from '@/services'
import { flowColumns } from './config'
import { ModalForm, ProFormText, ProFormTextArea } from '@ant-design/pro-form'
import ProCard from '@ant-design/pro-card'

const FlowPage: React.FC<{}> = () => {
    const actionRef = useRef<ActionType>()
    const onFinish = async (values: any) => {
        const { flag } = await HttpSetVersionContext(values)
        if (flag === 1) {
            actionRef.current?.reload()
            return true
        }
    }
    const edit: ProColumns<IT.IVersionFlow>[] = [
        {
            title: '操作',
            key: 'option',
            width: 50,
            valueType: 'option',
            render: (_: any, row: any, i, action) => [
                <ModalForm
                    {...{
                        onFinish: (e) => onFinish({ ...e, versionid: row.versionid }),
                        key: row.id,
                        preserve: false,
                        modalProps: { centered: true, destroyOnClose: true, maskClosable: false },
                        width: 'auto',
                    }}
                    trigger={<a key='a'>版本信息</a>}>
                    <ProFormText
                        {...{
                            width: 'xl',
                            name: 'versionid',
                            label: '版本',
                            initialValue: row.version,
                            readonly: true,
                        }}
                    />
                    <ProFormTextArea
                        {...{
                            width: 'xl',
                            name: 'context',
                            label: '更新内容',
                            placeholder: '请输入更新内容',
                            initialValue: row.context || `更新内容：\n`,
                            fieldProps: {
                                allowClear: true,
                                showCount: true,
                                maxLength: 30000,
                                autoFocus: true,
                                autoSize: { minRows: 6, maxRows: 15 },
                            },
                            rules: [{ required: true, message: '请输入更新内容' }],
                        }}
                    />
                </ModalForm>,
            ],
        },
    ]
    return (
        <ProTable<IT.IVersion>
            {...{
                actionRef,
                columns: [...flowColumns, ...edit],
                rowKey: 'versionid',
                bordered: true,
                size: 'small',
                dateFormatter: 'string',
                headerTitle: '迭代信息',
                editable: { type: 'multiple' },
                search: { labelWidth: 'auto' },
                pagination: { pageSize: 50 },
                request: async (params = {}) => await HttpQueryFlowVersion(params),
                expandedRowRender: (record) => {
                    return (
                        <ProCard split='vertical'>
                            {record.repo &&
                                record.repo.map((repo) => (
                                    <ProCard
                                        bordered
                                        colSpan={4}
                                        key={repo.repoid}
                                        style={{
                                            textAlign: 'center',
                                            color: repo.flow?.isUpdata ? '#344fcb' : '#b3b3b3',
                                        }}>
                                        <div>
                                            {repo.repoName}【v{repo.flow?.versionName || '未知'}】
                                        </div>
                                        <div>{repo.flow?.ct || '未知'}</div>
                                    </ProCard>
                                ))}
                        </ProCard>
                    )
                },
            }}
        />
    )
}

export default FlowPage
